 *{margin: 0;padding: 0;font-size: 14px}
  li{list-style: none}
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0;overflow: hidden}

  .guide{background:#e2e2e1 url(images/guide.png) no-repeat;z-index:99;position: absolute;background-size: 320px 460px;height:100%;width: 100%;top: 0;left: 0}
  .guide .begin{position: absolute;top: 342px;width: 230px;height: 52px;left: 50%;margin-left: -115px;}

  #map_canvas { height: 100% }
  #map_canvas .pop_tip p{
  	line-height: 1.6;
  }
  .header{
  	height: 45px;position: absolute;top:0;left: 0;width: 100%;
  	background:-webkit-gradient(linear, left top, left bottom, from(#36a1db), to(#2360ad));
  	line-height: 45px;text-align: center;color: #FFF;font-size: 20px;
  }
  .header .publish{position: absolute;right: 10px;width:46px;height: 31px;top:7px;background-image: url(base64/publish.png);background-size: 46px 31px;display: block;}
  .header .publish:active{background-image: url(base64/publish_press.png)}
  .header .camera{position: absolute;left: 10px;width:46px;height: 31px;top:7px;background-image: url(base64/camera.png);background-size: 46px 31px;display: block;}
  .header .camera:active{background-image: url(base64/camera_press.png)}
  .header .filter .filter_dropdown{position: absolute;left: 0;top: 31px;width:196px;height: 230px;background-image: url(base64/filter-dropdown.png);background-size: 196px 230px;display: none}
  .header .filter .filter_dropdown .filter_condition{padding-left: 15px;padding-top: 15px;padding-right: 10px}
  .header .filter .filter_dropdown .filter_condition li{height: 30px;text-align: left;padding-top: 5px;padding-bottom: 5px;border-bottom: #347094 1px solid;border-top: #5d9bca 1px solid}
  .header .filter .filter_dropdown .filter_condition li.first{border-top: none;}
  .header .filter .filter_dropdown .filter_condition li.last{border-bottom: none;}
  .header .filter .filter_dropdown .filter_condition .active{background-color: #88b5df}
  .header .filter .filter_dropdown .filter_condition .ico{width: 33px;height: 30px;background-size:33px 30px;display: inline-block;float: left;margin: 0 15px 0 10px}
  .header .filter .filter_dropdown .filter_condition .ico_coffee{background-image: url(base64/ico-coffee.png)}
  .header .filter .filter_dropdown .filter_condition .ico_clothes{background-image: url(base64/ico-clothes.png)}
  .header .filter .filter_dropdown .filter_condition .ico_photo{background-image: url(base64/ico-photo.png)}
  .header .filter .filter_dropdown .filter_condition .ico_shopping{background-image: url(base64/ico-shopping.png)}
  .header .filter .filter_dropdown .filter_condition .ico_more{background-image: url(base64/ico-more.png)}
  .header .filter .filter_dropdown .filter_condition span{font-size: 12px;color: #fff;float: left;line-height: 30px}

  .header .filter_active .filter_dropdown{display: block;}

  .location{position: absolute;bottom: 15px;left: 15px;width:48px;height: 47px;background-size: 48px 47px;background-image: url(base64/location.png)}
  .location:active{background-image: url(base64/location_press.png)}

  .add_topic_container{height: 233px;position: absolute;top:-233px;left: 0;width: 100%;-webkit-transition: top 0.3s ease-in-out}
  .add_topic_container_show{top:0;}
  .add_topic_container .head{height: 46px;background-image:url(base64/head_bg.png);background-repeat: repeat-x;background-size: 4px 46px}
  .add_topic_container .head .button{background-size: 46px 31px;width: 46px;height: 31px;background-image: url(base64/head_button.png);display: block;text-align: center;color: #fff;line-height: 31px;position: absolute;top:7px;font-size: 12px}
  .add_topic_container .head .button:active{background-image: url(base64/head_button_press.png);}
  .add_topic_container .head .cancel{left: 10px}
  .add_topic_container .head .finish{right: 10px}
  .add_topic_container .content_container{background-color: #fff;padding: 20px}
  .add_topic_container .content_container textarea{height: 70px;width: 100%;border: none;}
  .add_topic_container .other_media{height: 44px;width: 100%;background-size: 8px 44px;background-repeat: repeat-x;background-image: url(base64/media_bg.png)}
  .add_topic_container .other_media .text{float: left;color: #959494;margin-top: 13px;margin-left: 15px}
  .add_topic_container .other_media .ico_media{float: left;width:30px;height: 24px;background-size: 30px 24px;margin-top: 10px;margin-left: 18px}
  .add_topic_container .other_media .media_photo{background-image: url(base64/media_photo.png)}
  .add_topic_container .other_media .media_video{background-image: url(base64/media_video.png)}
  .add_topic_container .other_media .media_music{background-image: url(base64/media_music.png)}
  .add_topic_container .other_media .media_photo:active{background-image: url(base64/media_photo_active.png)}
  .add_topic_container .other_media .media_video:active{background-image: url(base64/media_video_active.png)}
  .add_topic_container .other_media .media_music:active{background-image: url(base64/media_music_active.png)}
  .add_topic_container .other_media .private{background-image: url(base64/private.png);width: 49px;height: 35px;background-size: 49px 35px;float: right;margin-right: 10px;margin-top:5px;}
  .add_topic_container .other_media .private_active{background-image: url(base64/private_active.png);width: 111px;height: 35px;background-size: 111px 35px;}

  .details_page{background-color: #e2e2e1;display:none;position: absolute;z-index:9;overflow-y: scroll;overflow-x:hidden;width: 320px;right: -320px;top:0;height: 100%;-webkit-transition: right 0.3s ease-in-out}
  .details_page_show{right: 0;}
  .details_page .header{z-index: 10;width: 320px;position: fixed;right: 0;left: auto}
  .details_page .header .button{background-size: 46px 31px;width: 46px;height: 31px;background-image: url(base64/head_button.png);display: block;text-align: center;color: #fff;line-height: 31px;position: absolute;top:7px;font-size: 12px;left: 10px;text-decoration: none;}
  .details_page .header .comment_link{right: 20px;left: auto;}
  .details_page .header .button:active{background-image: url(base64/head_button_press.png)}
  .details_page .tree{width: 280px;display: block;margin:55px auto;z-index: -1;position: relative}
  .details_page .user_info{height: 40px;margin-left: 15px;margin-top: -100px}
  .details_page .user_info .avatar{width: 40px;height: 40px;float: left;}
  .details_page .user_info .user_name{float: left;margin-top: 20px;margin-left: 10px}
  .details_page .topic_details{background-color: #fff;-webkit-box-shadow:1px 1px 3px #a7a5a5;margin:10px 6px 0 6px;padding: 10px;border-radius: 5px}
  .details_page .topic_details .topic_pic{max-width: 272px;margin: 15px auto;display: block;}


  .details_page .comments{padding: 0 16px}
  .details_page .comments .comments_list{}
  .details_page .comments .comments_list li{padding:10px 0 10px 40px;position: relative;line-height: 1.5em;border-bottom: #898989 1px solid}
  .details_page .comments .comments_list li .commenter_avatar{position: absolute;left: 0;width: 30px;height: 30px;}
  .details_page .comments .comments_list li .commenter_name{color: #0071bc}
  .details_page .comments .comments_list li .commenter_content{color: #000000}
  .details_page .comments .comments_list li .datetime{color: #898989}

  .details_page .comment_container{background-color: #fff;position: relative;border: #c5c3c3 1px solid;-webkit-box-shadow:0 1px 3px #bebebe;padding: 8px 8px 35px 48px;margin: 20px 8px;border-radius: 5px}
  .details_page .comment_container textarea{width:210px;height: 50px;border: none;}
  .details_page .comment_container .current_comments{position: absolute;width: 30px;height: 30px;left: 10px;top: 10px}
  .details_page .comment_container .ico_delete,.details_page .comment_container .ico_finish{background-size: 24px 24px;width: 24px;height: 24px;position: absolute;bottom:5px;right: 55px;background-image: url(base64/ico_delete.png)}
  .details_page .comment_container .ico_finish{right: 20px;background-image: url(base64/ico_finish.png)}


  /*@media only screen and (max-device-width:640px) {  
    html,body{width:480px;height:320px;}
    body{background:url(images/bg_landscape.jpg) no-repeat;-webkit-background-size:100% 100%;}
    body *{display:none;}
} */